import { Carousel } from 'antd';
import React from 'react';
import styles from './Slideshow.less';

type SlideshowData = {
  img: string;
};

interface SlideshowProps {
  slideshowData: Array<SlideshowData>;
}

const contentStyle: React.CSSProperties = {
  height: '450px',
  color: '#fff',
  lineHeight: '450px',
  textAlign: 'center',
  background: '#364d79',
  borderRadius: '12px',
};

const App: React.FC<SlideshowProps> = ({ slideshowData }) => {
  return (
    <div className={styles.carouselContainer}>
      <Carousel autoplay fade className={styles.app}>
        {slideshowData.map((item, index) => (
          <div key={index}>
            <h3 style={{ ...contentStyle }}>
              <img src={item.img} alt="error" className={styles.img} />
            </h3>
          </div>
        ))}
      </Carousel>
    </div>
  );
};

export default App;
